<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        #main{width: 600px;height: 400px;}
    </style>
</head>
<body>
    <h1 onclick="show()">Echart图表测试</h1>
    <!--为EChart准备一个具备大小(宽高)的DOM-->
    <div id="main"></div>
</body>
<script>
    var div=document.getElementById('main');
    var myChart=echarts.init(div);
    // 指定图表的配置项和数据
    var option={
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //异步更新 图表结构
    function show(){
        var url="http://localhost:8081/CG/echart";
        $.get(url).done(function (data){
            // 填入数据
            myChart.setOption({
                xAxis: {data: data.title},
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: data.data
                }]
            });
        });
    }
</script>
</html>